<template>
  <div class="card sku-box">
    <el-image :src="props.sku.defaultPic">
      <template #error>
        <div class="image-slot">
          <el-icon>
            <icon-picture/>
          </el-icon>
        </div>
      </template>
    </el-image>
    <div style="margin-top: 10px">
        <span class="sku-title">
          {{ props.sku.skuTitle }}
        </span>
    </div>
    <div>
      <span class="price-number">￥ {{ props.sku.price }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import {Sku} from '@/api/serve/re-market/sku/type'
import {Picture as IconPicture} from '@element-plus/icons-vue'

let props = defineProps({
  sku: {
    required: true,
    type: Object as () => Sku,
  }
})
</script>

<style scoped>
.sku-box {
  width: 250px;
  height: 304px;
  padding: 5px;
}

.sku-box:hover {
  border: 2px solid #409EFF;
}

.price-number {
  color: #ff0000;
  font-weight: 600;
  font-size: large;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 238px;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.sku-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: normal; /* 允许换行 */
  font-size: large;
}
.sku-title:hover{
  color: #007bff;
}
</style>
